<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery事件绑定</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }

        p {
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>
</head>

<body>

    <div>我是一个div标签
        <p>我是div内的p标签</p>
    </div>

    <script src="./jquery.js"></script>
    <script>
        /*
        绑定事件
        */

        //1.on()方法绑定事件
        //1-1.基础绑定事件
        //语法：元素集合.on('事件类型'，事件处理函数)
        //    $('div').on('click',function(){console.log('我是div的点击事件')})

        //1-2.事件委托绑定事件
        //语法.元素集合.on('事件类型'，选择器，事件处理函数)
        //把事件绑定给div元素，当你在div内的p元素触发事件的时候，执行事件处理函数
        //事件委托，把p元素的事件委托给了div元素来绑定
        // $('div').on('click', 'p', function () { console.log('我是事件委托形式的事件') })

        //1-3.批量绑定事件
        //语法：元素集合.on({事件类型1：处理函数，事件处理2：处理函数})
        //注意：不能进行事件委托了
        // $('div').on({ 
        //     click:function(){console.log('点击事件')},
        //     mouseover:function(){console.log('鼠标移入事件')},
        //     mouseout:function(){console.log('鼠标移出事件')}
        // })

        //2.one()
        //用来绑定事件，和on方法绑定事件的方式是一样的
        //区别：one方法绑定的事件，只能执行一次
        //2-1.基础绑定事件
        // $('div').one('click',function(){console.log('我是div的点击事件')})//点击一次就没了
        //2-2.事件委托
        // $('div').one('click', 'p', function () { console.log('我是事件委托形式的事件') })
        //2-3.批量绑定事件
        //  $('div').one({ 
        //     click:function(){console.log('点击事件')},
        //     mouseover:function(){console.log('鼠标移入事件')},
        //     mouseout:function(){console.log('鼠标移出事件')}
        // })

        //3.hover()
        //注意：jQuery里面一个特殊的事件
        //语法：元素集合.hover(移入时触发的函数，移出时触发的函数)
        //   当你只传递一个函数的时候，会在移入移出都触发
        // $('div').hover(
        //     function(){console.log('函数1')},
        //     function(){console.log('函数2')}
        // )

        //4.常用事件函数
        //jQuery把我们最常用的一些事件，单独做成了事件函数
        //我们通过调用这些事件函数，来达到绑定事件的效果
        //click(),mouseover(),mouseout(),change(),...
        $('div').click(function () { console.log('点击事件') })
    </script>
</body>

</html>